import { ActionSheet, Circle, Icon } from 'vant';
import { defineComponent } from 'vue';
import './index.less';
import HTip from '../../common/HTip';
import { organizeScore, scoreDetail } from '@/api/home';
import Detail from '../Detail';
import { dateFormatter } from '@/utils';
export default defineComponent({
  name: 'Sale',
  props: ['userInfo'],
  setup(props) {
    const detailInfo = reactive({
      title: '',
      show: false,
      list: [],
      sum: {}
    }) as AnyObject;
    const list = ref([]) as any;
    const grade = {
      S: '100%',
      A: '80%',
      B: '60%',
      C: '40%',
      D: '20%'
    } as AnyObject;
    const detailRef = ref();
    const data2 = reactive({
      search: {
        month: undefined
      },
      list: [
        {
          key: 'month',
          type: 'popup',
          title: '日期选择',
          icon: 'calendar',
          placeholder: '请选择'
        }
      ]
    }) as AnyObject;
    const tableDetail = [
      { title: '考核项', key: 'item' },
      { title: '实际完成', key: 'finish' },
      { title: '得分/占比', key: 'ratio' },
      { title: '完成率', key: 'finish_rate' }
    ];
    let data = [
      {
        title: '当月营收达成率',
        rate: props.userInfo.sale_data.month_rate,
        isShow: true
      },
      {
        title: '组织绩效',
        rate: props.userInfo.organize_rate,
        tip: (
          <HTip content="<div><p>【该数据每日02:00更新一次】</p><p>组织绩效达成率由4个指标综合计算得出：产品平均合格率、生产事故、客诉降幅、退货率。</p></div>" />
        ),
        click: viewDetail,
        isShow: true
      },
      {
        title: '本月业绩',
        rate: props.userInfo.mysale_rate,
        isShow: props.userInfo.column?.includes('3')
      },

      {
        title: '本月绩效',
        rate: props.userInfo.score_rate,
        tip: (
          <HTip content="<div><p>【该数据每日02:00更新一次】</p><p>本月绩效达成率的统计为自动计算的计算绩效指标，不包括手动评分的绩效指标数据。可点击数字查看详情。</p></div>" />
        ),
        isShow: props.userInfo.column?.includes('2'),
        click: viewLiDetail
      },
      {
        title: '上月绩效',
        rate: grade[props.userInfo.performance_grade],
        rareRate: props.userInfo.performance_grade,
        isShow: props.userInfo.column?.includes('1')
      }
    ] as any;
    data = data.filter((item: AnyObject) => item.isShow);
    data.map((item: AnyObject) => (item.number = parseFloat(item.rate)));
    const search = async (val: AnyObject) => {
      const real_month = val ? dateFormatter(val.month) : undefined;
      const { data: dd } = await organizeScore({ month: real_month });
      console.log(JSON.stringify(dd) == '[]');

      if (JSON.stringify(dd) == '[]') {
        list.value = [];
      } else {
        conferList(dd);
      }
    };
    const conferList = (data: AnyObject) => {
      list.value = [
        {
          item: '产品平均合格率',
          finish: data.pass_rate + '%',
          ratio: `${data.pass_rate_total_score}/${data.pass_rate_score}`,
          finish_rate: data.pass_rate_finish_rate
        },
        {
          item: '生产事故',
          finish: data.trouble,
          ratio: `${data.trouble_total_score}/${data.trouble_score}`,
          finish_rate: data.trouble_finish_rate
        },
        {
          item: '客诉降幅',
          finish: data.complaint,
          ratio: `${data.complaint_total_score}/${data.complaint_score}`,
          finish_rate: data.complaint_finish_rate
        },
        {
          item: '退货率',
          finish: data.return_goods_rate + '%',
          ratio: `${Number(data.return_goods_rate_total_score || 0).toFixed(2)}/${
            data.return_goods_rate_score
          }`,
          finish_rate: data.return_goods_rate_finish_rate
        },
        {
          item: '合计',
          finish: '',
          ratio: `${Number(data.total_score || 0)?.toFixed(2)}/${data.score}`,
          finish_rate: data.finish_rate
        }
      ];
    };
    function viewLiDetail() {
      detailInfo.title = '绩效详情';
      detailInfo.list = [];
      detailInfo.show = true;
      scoreDetail(props.userInfo.score_rate_id).then((res: AnyObject) => {
        let start = 0;
        let end = 0;
        console.log(res.data);

        res.data.list.forEach((item: AnyObject, index: number, arr: any[]) => {
          if (item.name == '岗位职责') {
            !start && (start = end = index);
            end++;
          } else {
            if (end) {
              console.log(start, end);

              detailInfo.list.push({
                title: '岗位职责',
                list: arr.slice(start, end)
              });
              end = 0;
            }
            detailInfo.list.push({ title: item.name, list: [item] });
          }
        });
        detailInfo.sum = res.data.sum;
      });
    }
    function viewDetail(params?: AnyObject) {
      if (JSON.stringify(list.value) == '[]') {
        search(data.search);
      }
      detailRef.value.show = true;
    }
    return () => (
      <>
        <div class="sale flex-between">
          {data.map((item: AnyObject) => (
            <div class="sale_item">
              <Circle
                v-model:current-rate={item.number}
                stroke-width="120"
                color="#4a74ea"
                layer-color="#e5e6eb"
                rate={Number(item.rate)}
                text={item.rareRate || item.rate}
                size={80}
              />
              <p class="title flex-center">
                <span onClick={() => item.click?.()}>{item.title}</span>
                <span>{item.tip}</span>
              </p>
            </div>
          ))}
        </div>
        <Detail
          title="组织绩效"
          ref={detailRef}
          filterDetail={data2}
          tableDetail={tableDetail}
          onSearch={search}
          list={list.value}
        />
        <ActionSheet
          v-model:show={detailInfo.show}
          title={detailInfo.title}
          class="detailinfo"
        >
          <ul class="detailinfo_kpi">
            {detailInfo.list.map((item: AnyObject) => (
              <li class="kpi_item">
                <div class="title">{item.title}</div>
                {item.list.map((_item: AnyObject) => (
                  <ul class="content">
                    <li>
                      <div>{_item.project_name}</div>
                      <div>
                        <div>{_item.score}</div>
                        <p>占比</p>
                      </div>
                      <div>
                        <div>{_item.total_score}</div>
                        <p>得分</p>
                      </div>
                    </li>
                  </ul>
                ))}
              </li>
            ))}
            <li class="kpi_item">
              <div class="title">评分合计</div>
              <ul class="content sum flex-between">
                <p>
                  <span>评分合计</span>
                  <span>{detailInfo.sum.total}</span>
                </p>
                <p>
                  <span>绩效</span>
                  <span>{detailInfo.sum.performance}</span>
                </p>
              </ul>
            </li>
          </ul>
        </ActionSheet>
      </>
    );
  }
});
